<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        text-align: center;
        padding-top: 50px;
    }
    p{
        font-size: 5px;
        transform: scale(0.5);/*可以将字体变小*/
    }
    .box{
       /* transition: transform 2s background-color: 1s ;时延*/
        display: inline-block;
        width: 200px;
        height: 200px;
        border: 1px solid #444;
        font-size: 12px;
        /*background-color: red;*/
        animation: yinghuochong 2s linear  infinite;
      /*  animation: xinTiao 2s linear alternate infinite;!*动画*!
                        !*线性的（匀速）逆向播放 无限循环*!*/
    }
    @keyframes xuanZhuan {/*关键贞*/
        from{
            transform: rotate(0deg);

        }/*首*/
        to{
            transform: rotate(360deg);
        }/*尾*/
    }
    @keyframes xinTiao {
        from{
            transform: scale(1);
        }
        to{
            transform: scale(0.5);

        }
    }
    @keyframes yinghuochong {
        from{
            box-shadow: none;
            transform: rotate(0deg);
        }
        to{
            box-shadow: 0 0 40px green;
            transform: rotate(360deg);
        }

    }
    .box:hover{
       /* transform: rotate(70deg);!*旋转*!
        background-color: #00d7c6;
*/
        /*transform: translate(-400px,0);!*位移，负数向左跑，正数向右*!*/
      /*  transform: scale(0.5);!*放大缩小*!*/

    }
</style>
<body>
<p>好</p>
<div class="box">

</div>
</body>
</html>